<template>
    <el-drawer
    title="详细信息"
    direction="rtl"
    ref="drawer"
    size="44%"
    :visible.sync="visible">
    <div class="demo-drawer__header">
      <el-row>
        <el-col :span="12" style="text-align:center;">
          <el-avatar :size="70" src="https://empty" @error="errorHandler">
            <img v-if="e.avatarPic" :src="remoteUrl + e.avatarPic"/>
            <span style="font-size:26px;font-weight:600" v-else>{{e.name.substring(0,1)}}</span>
          </el-avatar>
        </el-col>
        <el-col :span="12">
          <el-button size="mini" @click="visible = false">取 消</el-button>
        </el-col>
      </el-row>
    </div>
    <el-form label-width="120px" class="queryForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名：">
            {{e.name}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：">
            {{e.gender == 2? '女':'男'}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证号：">
            {{e.idCard}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码：">
            {{e.mobile}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学历：">
            {{e.academic}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务：">
            {{e.jobGrade}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="入职时间：">
            {{e.entryTime? e.entryTime.substring(0,10):''}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同到期日期：">
            {{e.contractExpirationTime? e.contractExpirationTime.substring(0,10):''}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="员工成长日志：">
            <div style="word-wrap:break-word;line-height:22px;width:100%;">
              {{e.remark}}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="简历：">
            <viewer :images="e.contractInfoList">
              <img v-for="(src,index) in e.contractInfoList" :src="src.path" :key="index" style="margin-right:5px;width:150px;height:150px;"/>
            </viewer>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        e:{},
        remoteUrl: '',
      }
    },
    methods: {
      init (id) {
        this.visible = true
        this.$http({
          url: this.$http.adornUrl('/certificate/employeeInfo/info/'+ id),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.remoteUrl = data.remoteUrl
            this.e = data.e
          }
        })
      },
      errorHandler() {
        return true
      },
    }
  }
</script>

<style lang="scss">
    .demo-drawer {
        &__content {
            display: flex;
            flex-direction: column;
            height: 100%;
            form {
                flex: 1;
            }
        }
        &__footer {
            display: flex;
            button {
                flex: 1;
            }
        }
        &__header {
            text-align:right;
            margin-bottom:20px;
            width:100%;
        }
    }
    .el-drawer__body {
        padding: 20px;
    }
    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
      margin-top: 0px;
    }
</style>
